<template>
	<view>
		<view class="user-info-box">
			<view class="header-view"><image class="header-view-img" src="../../static/header.png"></image></view>
			<view class="user-info-view" v-if="isLogin">
				<view class="nickname-view">{{user.username}}</view>
				<view class="learninfo-view">学习时长 10 小时 | 经验 100</view>
			</view>
			<view  class="tologin-view" v-if="!isLogin" @click="toLogin">去登录 ></view>
		</view>
		
		<view class="options-view">
			<view class="options-item-view" v-for="o in options">
				<view><image class="options-item-img" :src="o.icon"></image></view>
				<view class="options-item-title">{{o.title}}</view>
			</view>
		</view>
		
		<view style="height: 40rpx; background-color: #e9e9e9;">
		</view>
		
		<view class="list-view">
			<view class="item-view" >
				<view class="item-img-view">
					<image class="list-item-img" src="../../static/shopcar.png"></image>
				</view>
				<view class="item-title-view">
					<text class="list-item-title">我的购物车</text>
				</view>
			</view>
			<view class="item-view" >
				<view class="item-img-view">
					<image class="list-item-img" src="../../static/collect.png"></image>
				</view>
				<view class="item-title-view">
					<text class="list-item-title">我的收藏</text>
				</view>
			</view>
			<view class="item-view" >
				<view class="item-img-view">
					<image class="list-item-img" src="../../static/order.png"></image>
				</view>
				<view class="item-title-view">
					<text class="list-item-title">我的订单</text>
				</view>
			</view>
			<view class="item-view" >
				<view class="item-img-view">
					<image class="list-item-img" src="../../static/pingtuan.png"></image>
				</view>
				<view class="item-title-view">
					<text class="list-item-title">健身计划</text>
				</view>
			</view>
		</view>
		<view  v-if="isLogin" style="text-align: center;margin-top: 100rpx;width: 80%;margin-left: 10%;">
			<button  plain="true" @click="logout" type="primary" class="login-button">退出登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user:"",
				isLogin:false,
				options:[
					{title:"我的课程",icon:"../../static/course.png"},
					{title:"运动数据",icon:"../../static/doing.png"},
					{title:"运动圈子",icon:"../../static/quest.png"},
					{title:"运动百科",icon:"../../static/note.png"}
				]
				
			}
		},
		onLoad() {
			
		},
		onShow() {
		
			var tuser = uni.getStorageSync("user");
			
			if(tuser){
				this.user = tuser;
				this.isLogin = true;
			}
		},
		methods: {
			toLogin(){
				let user = uni.getStorageSync("user");
				if(!user){
					uni.navigateTo({
						url:"../login/login"
					})
				}
			},
			logout(){
				uni.removeStorageSync("user");
				uni.navigateTo({
					url:"../login/login"
				})
			}
		}
	}
</script>

<style>
	.header-view-img{
		width: 120rpx;
		height: 120rpx;
		border: 1rpx solid #D3D3D3;
		border-radius: 50%
	}
	.header-view{
		width: auto;
		float: left;
		height: auto;
	}
	.user-info-view{
		width: 60%;
		float: left;
		height: auto;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}
	.user-info-box{
		height: 120rpx;
		background-color: #33384a;
		padding: 40rpx;
	}
	.options-view{
		height: 120rpx;
		padding: 5%;
		
	}
	.nickname-view{
		font-size: 40rpx;
		color: #FFFFFF;
		font-weight: bold;
	}
	.learninfo-view{
		color: #dedede;
		font-size: 32rpx;
	}
	.options-item-view{
		text-align: center;
		width: 24%;
		display: inline-block;
		font-size: 24rpx;
	}
	.options-item-img{
		width: 80rpx;
		height: 80rpx;
	}
	.item-view{
		padding: 20rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-bottom: 1rpx solid #D3D3D3;
	}
	.list-item-img,.item-img-view{
		height: 60rpx;
		width: 60rpx;
	}
	.item-img-view,.item-title-view{
		float: left;
		margin-left: 20rpx;
	}
	.list-item-title{
		height: 60rpx;
		line-height: 60rpx;
		font-size: 32rpx;
	}
	.tologin-view{
		height: 120rpx;
		line-height: 120rpx;
		font-size: 36rpx;
		color: #FFFFFF;
		font-weight: bold;
		padding-left: 80rpx;
		float: left;
	}
	
</style>
